<template>
  <a-layout-sider
    v-model="collapsed"
    :theme="sideTheme"
    :class="['side-menu', 'beauty-scroll', isMobile ? null : '',$route.path==='/packetPush/versionManagement'?'p-vl-slider':'']"
    width="160px"
    :collapsible="collapsible"
    :trigger="null"
  >
    <!-- <div
      class="d-flex ai-center jc-center flex-column mt-20 left-avatar"
      :class="!collapsed ? 'b-left-avatar' : 's-left-avatar'"
    >
      <a-dropdown placement="bottomCenter">
        <div class="header-avatar" style="cursor: pointer">
          <a-avatar
            class="avatar"
            size="small"
            shape="circle"
            src="https://gw.alipayobjects.com/zos/rmsportal/jZUIxmJycoymBprLOUbT.png"
          />
        </div>
        <div slot="overlay" class="ex-item-box">
          <div class="ex-item-box-li" @click="logoutHandler">
            <a-icon style="margin-right: 8px" type="poweroff" />
            <span>退出登录</span>
          </div>
        </div>
      </a-dropdown>

      <span v-show="!collapsed" class="name mt-8">{{ userInfo.username }}</span>
    </div> -->
    <i-menu
      :theme="theme"
      :collapsed="collapsed"
      :options="menuData"
      :openType="openType"
      class="menu"
      @select="onSelect"
    />

      <a-icon class="trigger bottom-icon-col" 
      :class="[collapsed?'bottom-icon-c':'bottom-icon-r']"  
      :component="require('@/assets/icon/expand.svg')" @click="toggleCollapse" />
  </a-layout-sider>
</template>

<script>
import IMenu from './menu';
import { mapState, mapGetters, mapActions } from 'vuex';
export default {
  name: 'SideMenu',
  components: { IMenu },
  props: {
    collapsible: {
      type: Boolean,
      required: false,
      default: false
    },
    collapsed: {
      type: Boolean,
      required: false,
      default: false
    },
    menuData: {
      type: Array,
      required: true
    },
    theme: {
      type: String,
      required: false,
      default: 'dark'
    }
  },
  computed: {
    sideTheme() {
      return this.theme === 'light' ? this.theme : 'dark';
    },
    ...mapState('setting', ['isMobile', 'systemName','openType']),
    ...mapGetters('user', [
      'userInfo'
    ])
  },
  methods: {
    ...mapActions('user', [
      'logOut'
    ]),
    onSelect(obj) {
      this.$emit('menuSelect', obj);
    },
    // 退出
    logoutHandler() {
      this.logOut();
    },
    toggleCollapse() {
      this.$emit('toggleCollapse');
    },
  }
};
</script>

<style lang="less" scoped>
@import "index";
</style>

<style lang="less">
.bottom-icon-r {

  svg {
    transform: rotate(180deg) !important;
  }
}
.ant-layout-sider{

 .ant-menu-item:not(.ant-menu-item-selected) {
    a {
      color: @textColor4!important;
    }
  }
  .ant-menu-item.ant-menu-item-selected {
    a {
      color: #292F4C!important;
    }
  }
}




</style>

